<template>
  <div>
    <div class="pdf_navs">
      <div @click="pdfNavClick(item, index)" :class="['pdf_nav', currentPdfIndex === index ? 'active_pdf' : '']"
        v-for="(item, index) in pdfs" :key="index">{{ item }}</div>
    </div>
    <div class="pdf_trs_box flex">
      <div class="pdf_outer_box flex_1" style="height: calc(100vh - 70px);overflow: auto;">
        <origPdf
          ref="pdfRef"
          v-if="layout.pdf_info"
          :pdfName="pdfs[currentPdfIndex]"
          @blkClick="(targetId, isPage, sourceTop) => scrollElementToTop('\.trs-scroll-box', targetId, isPage, sourceTop)" />
      </div>
      <div class="trs_outer_box flex_1" ref="trsOuterRef" style="height: calc(100vh - 70px);overflow:hidden auto;">
        <trsCom
          v-if="showTrs && layout.pdf_info"
          ref="trsRef"
          :layout="layout"
          :page-width="trsPageWidth"
          @trsScroll="trsScroll"
          @blkClick="(targetId, isPage, sourceTop) => scrollElementToTop('\.pdf-scroll-box', targetId, isPage, sourceTop)" />
      </div>
    </div>

  </div>
</template>

<script>
import origPdf from '@/components/trsFile/origPdf.vue'
import trsCom from '@/components/trsFile/final.vue'
export default {
  name: 'trs',
  components: { origPdf, trsCom },
  data () {
    return {
      currentPdfIndex: 2,
      pdfs: [1, 2, 3, 66],
      layout: {},
      trsPageWidth: 800,
      showTrs: true
    }
  },
  mounted () {
    const targetNode = this.$refs.trsOuterRef
    let resizeObserver = new ResizeObserver(entries => {
      let tWidth = entries[0].contentRect.width
      // console.log('宽度变化：', tWidth)
      this.trsPageWidth = tWidth
      this.showTrs = false
      this.$nextTick(() => {
        this.showTrs = true
      })
    })
    resizeObserver.observe(targetNode)
    this.pdfNavClick(this.pdfs[this.currentPdfIndex], this.currentPdfIndex)
  },
  beforeDestroy () {
    this.resizeObserver?.disconnect()
  },
  methods: {
    pdfNavClick (item, index) {
      this.currentPdfIndex = index
      this.layout = {}
      this.$nextTick(() => {
        this.layout = require(`/public/${item}.json`)
      })
    },
    /* containerSelector-父容器、targetSelector-目标块、isPage是否为页面级定位、点击块相对父容器视口的距离 */
    scrollElementToTop (containerSelector, targetSelector, isPage = false, sourceTop = 60) {
      const container = document.querySelector(containerSelector);
      const target = document.querySelector(targetSelector);
      const parent = target.parentElement;
      // console.log(container,target);

      if (!container || !target) {
        console.warn("容器或目标元素未找到");
        return;
      }
      const offsetTop = target.offsetTop + parent.offsetTop - container.offsetTop;
      // console.log(offsetTop,'76666');

      if (containerSelector === '\.pdf-scroll-box') {
        if (!isPage) {
          this.$refs.pdfRef.currentId = targetSelector.replace('#', '')
        }
        this.$refs.pdfRef.isProgrammaticScroll = true
      } else {
        if (!isPage) {
          this.$refs.trsRef.currentId = targetSelector.replace('#', '')
        }
        this.$refs.trsRef.isProgrammaticScroll = true
      }
      if (isPage) {
        // 默认会触发滚动容器的scroll事件-isProgrammaticScroll字段手动控制
        container.scrollTop = offsetTop - sourceTop - 100;
      }
    },
    // 译文滚动时去加载未加载的页面
    async trsScroll (pageNum) {
      let _this = this.$refs.pdfRef
      let max = Math.max(..._this.loadedPages)
      if (pageNum + 1 > max) {
        const next = max + 1
        if (next > _this.totalPages) return
        _this.loadingNext = true
        _this.loadedPages.push(next)
        await this.$nextTick()
        _this.renderPage(next)
        _this.loadingNext = false
      }
      await this.$nextTick()
      // 获取当前块相对容器视口距离
      const container = document.querySelector('.trs-scroll-box');
      const self = document.querySelector(`#trs-page-${pageNum}`);
      const offsetTop = self.offsetTop - container.offsetTop;
      let selfTop = offsetTop - container.scrollTop
      this.scrollElementToTop('\.pdf-scroll-box', `#pdf-page-${pageNum}`, true, selfTop)
    }
  }
}
</script>

<style lang="less" scoped>
.pdf_navs {
  display: flex;

  .pdf_nav {
    padding: 10px 20px;
    border: 1px solid var(--bgcThemeColor);
    border-radius: 10px;
    cursor: pointer;
  }

  .active_pdf {
    background: var(--bgcThemeColor);
    font-weight: bold;
    color: #fff;
  }
}

.pdf_trs_box {
  .pdf_outer_box {
    border: 1px solid #ccc;
  }

  .trs_outer_box {
    border: 1px solid #ccc;
  }
}
</style>